<template>
    <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    mounted() {
        let myEcharts = echarts.init(this.$refs.myChart);
        let data = {
            // 注意，最外层是一个对象，代表树的根节点
            name: "层级1", // 节点的名称，当前节点 label 对应的文本
            children: [
                {
                    name: "层级2",
                    children: [
                        {
                            name: "层级3-1",
                            children: [
                                //子节点
                                { name: "数据1", value: 3938 }, // value 值，只在 tooltip 中显示
                                { name: "数据2", value: 3812 },
                                { name: "数据3", value: 6714 },
                                { name: "数据4", value: 743 },
                            ],
                        },
                        {
                            name: "层级3-2",
                            children: [
                                { name: "数据1", value: 3534 },
                                { name: "数据2", value: 5731 },
                                { name: "数据3", value: 7840 },
                                { name: "数据4", value: 5914 },
                                { name: "数据5", value: 3416 },
                            ],
                        },
                    ],
                },
            ],
        };

        let options = {
            tooltip: {
                //提示框
                trigger: "item", //触发时机
            },
            series: [
                {
                    type: "tree", //树图
                    data: [data],
                    top: "1%", //tree组件离容器顶部的距离
                    left: "7%",
                    bottom: "1%",
                    right: "20%",
                    symbolSize: 10, //标记的大小
																				orient:'TB',//LR左到右 RL右到左 TB上到下 BT下到上
                    label: {
                        //描述了每个节点所对应的文本标签的样式。
                        position: "left", //标签的位置。
                        verticalAlign: "middle", //文字垂直对齐方式
                        align: "right", //文字水平对齐方式
                        fontSize: 9,
																								rotate:90,//旋转文字
                    },
                    leaves: {
                        //叶子节点的特殊配置
                        label: {
                            //了叶子节点所对应的文本标签的样式
                            position: "right",
                            verticalAlign: "middle",
                            align: "left",
                        },
                    },
                    emphasis: {
                        //树图中个图形和标签高亮的样式。
                        focus: "descendant", //聚焦所有子孙节点
                    },
                    expandAndCollapse: true, //子树折叠和展开的交互由于绘图区域是有限的，而通常一个树图的节点可能会比较多，
                    // 这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，
                    // 等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，
                    // 可以点击将其展开。
                    animationDuration: 550,
                    animationDurationUpdate: 750,
                },
            ],
        };

        myEcharts.setOption(options);
    },
};
</script>

<style>
#myChart {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>